<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台-添加博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <!--bootstrap的js-->
    <!--  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>-->
</head>

<body>

<div class="container-fluid p-1 bg-dark text-white text-center">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/tags">标签</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/article">文章</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/about">关于</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/message">留言板</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
                <strong>搜索</strong>
            </a>
        </li>
    </ul>
</div>

<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content p-2 ">
            <div class="modal-body ">
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center fs-5 mb-3">搜　索</div>
                <div class="input-group mb-4">
                    <span class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </span>
                    <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
                </div>

                <div class="mb-2">搜索结果</div>
                <!-- 搜索结果展示区域 -->
                <div id="searchResults" class="list-group">
                </div>
            </div>

        </div>
    </div>
</div>

<!--个人资料描述-->
<div class="container" style="margin-top: 4em;max-width: 1200px">
    <div class="row ">
        <div class="col-md-5 col-12 mb-3">
            <div class="card rounded-4 shadow">
                <div class="card-body fw-bold ">
                    <div class="cz-about-me">
                        <p>你好，很高兴认识你👋</p>
                        <div class="d-flex align-items-center mb-4">
                            <img alt="wo" src="../static/images/me.jpg"  th:src="@{/images/me.jpg}">
                            <span class="cz-navbar-brand ps-3 fs-4"><strong th:text="${author}">ZX</strong></span>
                        </div>
                        <p style="white-space: pre-line;" th:text="${intro}">我是ZX，欢迎来到我的博客！我热爱写作、探索技术和分享知识。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7 col-12 mb-3">
            <div class="card h-100 rounded-4 shadow">
                <div class="card-body fw-bolder ">
                    <div class="cz-tag-card">
                        <span>🏀 我的标签</span>
                        <div class="cz-tag-list">
                            <div class="cz-tag" th:each="tag : ${tags}" th:text="${tag}">面向GPT编程</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row mb-3">
        <div class="col">
            <div class="card rounded-4 shadow">
                <div class="card-body fw-bold ">
                    <span>🙂 content</span>
                    <div class="cz-about-me" th:utext="${content}">
                        <h4 class="fw-bold pb-3">初衷</h4>
                        <p>做这个博客的初衷是为了找一个练手的springboot项目，而且当时看别人都有个人博客，自己也眼红了，于是便着手搭建博客。</p>
                        <p>博客就相当于自己的学习笔记一样，将自己学到的东西写成博文的方式记录下来，可以加深你对知识点的理解，记录足迹，反映成长。写博客实际上是记录一个人思考和解决问题的成长过程。很久之后，你再翻看自己以前写的文章，你会感觉得到自己的变化和进步。
                        </p>
                        <p>技术是很容易遗忘的，你学习完一门新的技术，很可能现在懂了，但是过一段时间没用很快就会遗忘，当你把你学习的内容写成博客，不仅可以加深记忆和理解，如果遗忘了还可以回头看看，也能帮助和你一样处于同一阶段的人。
                        </p>
                        <h4 class="fw-bold pb-3">关于我</h4>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!--底部栏-->
<footer class="border-top p-3 bg-white text-muted small">
    <div class="container pb-5 ">
        <div class=" d-flex align-items-center justify-content-between">
            <div>
                <span class="cz-navbar-brand mr-2"><strong th:text="${author}">ZX</strong></span>我的博客已营业：<span
                    id="htmer_time">1年105天8时13分28秒</span>
            </div>
            <div>
                <a target="_blank" class="text-secondary fw-bold" href="#">粤ICP备2022122083号-1</a>
            </div>
        </div>
    </div>
</footer>


<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>
<script>
    // 获取关键词输入框
    const keywordInput = $('#keywordInput');
    //搜索 当用户输入结束时触发事件
    keywordInput.on('input', function() {
        // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
        clearTimeout(this.timer);
        this.timer = setTimeout(function () {
            // 获取用户输入的关键词
            const keyword = keywordInput.val();
            // 发送 AJAX 请求
            $.ajax({
                url: '/search',
                method: 'GET',
                data: { keyword: keyword },
                success: function(response) {
                    // 处理从后端返回的数据
                    if (response.code === 20000){
                        var resultList = response.data.blogs;
                        // 获取搜索结果列表容器
                        var searchResults = $('#searchResults');
                        // 清空原来的结果
                        searchResults.empty();
                        if (resultList){
                            // 渲染搜索结果列表
                            resultList.forEach(function(blog) {
                                var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                                searchResults.append(blogItem);
                            });
                        }
                    }
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        }, 1000); // 1000 毫秒延迟
    });
</script>
</body>
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


</html>